<template>
  <div class="app-report-details">
    <project-detail
      :is-edit="true"
      style="padding: 20px 20px 0px 20px"
    />
    <div style="padding: 0px 20px 0px 20px">
      <el-divider><span
        style="color: #666; font-size: 12px"
      >以上为当前项目详细信息</span></el-divider>
    </div>

    <div class="details" style="margin-bottom: 10px !important;">
      <div
        v-show="displayR"
        style="
          width: 100%;
          height: 100px;
          text-align: center;
          line-height: 100px;
          color: #666;
        "
      >
        该项目还未提交过月报!
      </div>
      <el-collapse
        v-show="reportList.length > 0"
        v-model="activeNames"
        style="margin:0px 20px"
      >
        <el-collapse-item
          v-for="(item, index) in reportList"
          :key="index"
          :title="item.created_at + '     提交'"
          :name="item.id"
        >
          <!-- <template slot="title"> -->

          <el-form
            ref="submitFrom"
            :model="submitFrom"
            label-position="right"
            class="form-container"
          >
            <el-form-item
              class="guarantee"
              style="margin-bottom: 0px"
              label-width="130px"
              label="工程名称:"
            >
              <span>{{ item.project_name }}</span>
            </el-form-item>

            <el-form-item
              class="guarantee"
              style="margin-bottom: 0px"
              label-width="130px"
              label="五方主体:"
            >
              <span>{{ item.bodies }}</span>
            </el-form-item>

            <el-form-item
              class="guarantee"
              style="margin-bottom: 0px"
              label-width="130px"
              label="备案监理人员:"
            >
              <span>{{ item.record_supervisor }}</span>
            </el-form-item>

            <el-row :gutter="24">
              <el-col :span="11">
                <el-form-item
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="现场人员:"
                >
                  <span>{{ item.recocd_person }}</span>
                </el-form-item></el-col>
              <el-col :span="13">
                <el-form-item
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="联系方式:"
                >
                  <span>{{ item.recocd_mobile }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item
              class="guarantee"
              style="margin-bottom: 0px"
              label-width="130px"
              label="工程概况:"
            >
              <span>{{ item.project_overview }}</span>
            </el-form-item>

            <el-row :gutter="24">
              <el-col :span="11">
                <el-form-item
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="总造价:"
                >
                  <span>{{ item.total_cost }}</span>
                </el-form-item></el-col>
              <el-col :span="13">
                <el-form-item
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="监理费:"
                >
                  <span>{{ item.supervision_fee }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="11">
                <el-form-item
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="工程形象进度:"
                >
                  <span>{{ item.project_image_progress }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="开工日期:"
                >
                  <span>{{ item.commencement_date }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="11">
                <el-form-item
                  class="guarantee"
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="本月应上报监理费:"
                >
                  <span>{{ item.reported_this_month }}</span>
                </el-form-item></el-col>
              <el-col :span="13">
                <el-form-item
                  class="guarantee"
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="累计上报监理费:"
                >
                  <span>{{ item.accumulative_report }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="11">
                <el-form-item
                  class="guarantee"
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="本月完成产值:"
                >
                  <span>{{ item.completed_this_month }}</span>
                </el-form-item></el-col>
              <el-col :span="13">
                <el-form-item
                  class="guarantee"
                  style="margin-bottom: 0px"
                  label-width="130px"
                  label="累计完成产值:"
                >
                  <span>{{ item.accumulated_output_value }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item
              class="guarantees"
              style="margin-bottom: 0px"
              label-width="130px"
              label="备案人员是/否录入当地建筑主管部门:"
            >
              <span v-if="item.accumulated_output_value == 1">是</span>
              <span v-else>否</span>
            </el-form-item>

            <el-form-item
              class="guarantee"
              style="margin-bottom: -10px"
              label-width="130px"
              label="获奖情况:"
            >
              <span>{{ item.awards }}</span>
            </el-form-item>
          </el-form>
          <!-- </template> -->
        </el-collapse-item>
      </el-collapse>
      <div v-show="diaplayBtn" style="text-align: center; padding: 20px">
        <el-button
          style="margin-left: 10px"
          type="success"
          @click="goBack()"
        >返回</el-button>
      </div>
    </div>
    <div v-show="showSub" class="submit">
      <el-form
        ref="submitFrom"
        :model="submitFrom"
        label-position="right"
        class="form-container"
      >
        <el-form-item
          class="guarantee"
          style="margin-bottom: 10px"
          label-width="130px"
          label="工程名称:"
        >
          <el-input
            v-model="submitFrom.project_name"
            :rows="1"
            type="textarea"
            autosize
            placeholder="工程名称"
          />
        </el-form-item>

        <el-form-item
          class="guarantee"
          style="margin-bottom: 10px"
          label-width="130px"
          label="五方主体:"
        >
          <el-input
            v-model="submitFrom.bodies"
            :rows="1"
            type="textarea"
            autosize
            placeholder="五方主体"
          />
        </el-form-item>

        <el-form-item
          class="guarantee"
          style="margin-bottom: 10px"
          label-width="130px"
          label="备案监理人员:"
        >
          <el-input
            v-model="submitFrom.record_supervisor"
            :rows="1"
            type="textarea"
            autosize
            placeholder="备案监理人员"
          />
        </el-form-item>

        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item
              style="margin-bottom: 10px"
              label-width="130px"
              label="现场人员:"
            >
              <el-input
                v-model="submitFrom.recocd_person"
                :rows="1"
                type="textarea"
                autosize
                placeholder="现场人员"
              /> </el-form-item></el-col>
          <el-col :span="13">
            <el-form-item
              style="margin-bottom: 10px"
              label-width="130px"
              label="联系方式:"
            >
              <el-input
                v-model="submitFrom.recocd_mobile"
                :rows="1"
                type="textarea"
                autosize
                placeholder="联系方式"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          class="guarantee"
          style="margin-bottom: 10px"
          label-width="130px"
          label="工程概况:"
        >
          <el-input
            v-model="submitFrom.project_overview"
            :rows="1"
            type="textarea"
            autosize
            placeholder="工程概况"
          />
        </el-form-item>

        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item
              style="margin-bottom: 10px"
              label-width="130px"
              label="总造价:"
            >
              <el-input
                v-model="submitFrom.total_cost"
                :rows="1"
                type="textarea"
                autosize
                placeholder="总造价"
              /> </el-form-item></el-col>
          <el-col :span="13">
            <el-form-item
              style="margin-bottom: 10px"
              label-width="130px"
              label="监理费:"
            >
              <el-input
                v-model="submitFrom.supervision_fee"
                :rows="1"
                type="textarea"
                autosize
                placeholder="监理费"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item
              style="margin-bottom: 10px"
              label-width="130px"
              label="工程形象进度:"
            >
              <el-input
                v-model="submitFrom.project_image_progress"
                :rows="1"
                type="textarea"
                autosize
                placeholder="工程形象进度"
              />
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item
              style="margin-bottom: 10px"
              label-width="130px"
              label="开工日期:"
            >
              <el-date-picker
                v-model="submitFrom.commencement_date"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择开工日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item
              class="guarantee"
              style="margin-bottom: 10px"
              label-width="130px"
              label="本月应上报监理费:"
            >
              <el-input
                v-model="submitFrom.reported_this_month"
                :rows="1"
                type="textarea"
                autosize
                placeholder="本月应上报监理费"
              /> </el-form-item></el-col>
          <el-col :span="13">
            <el-form-item
              class="guarantee"
              style="margin-bottom: 10px"
              label-width="130px"
              label="累计上报监理费:"
            >
              <el-input
                v-model="submitFrom.accumulative_report"
                :rows="1"
                type="textarea"
                autosize
                placeholder="累计上报监理费"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item
              class="guarantee"
              style="margin-bottom: 10px"
              label-width="130px"
              label="本月完成产值:"
            >
              <el-input
                v-model="submitFrom.completed_this_month"
                :rows="1"
                type="textarea"
                autosize
                placeholder="本月完成产值"
              /> </el-form-item></el-col>
          <el-col :span="13">
            <el-form-item
              class="guarantee"
              style="margin-bottom: 10px"
              label-width="130px"
              label="累计完成产值:"
            >
              <el-input
                v-model="submitFrom.accumulated_output_value"
                :rows="1"
                type="textarea"
                autosize
                placeholder="累计完成产值"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          class="guarantees"
          style="margin-bottom: 10px"
          label-width="130px"
          label="备案人员是/否录入当地建筑主管部门:"
        >
          <el-radio-group v-model="submitFrom.record_personnel_yes">
            <el-radio-button :label="1">是</el-radio-button>
            <el-radio-button :label="2">否</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          class="guarantee"
          style="margin-bottom: 10px"
          label-width="130px"
          label="获奖情况:"
        >
          <el-input
            v-model="submitFrom.awards"
            :rows="1"
            type="textarea"
            autosize
            placeholder="获奖情况"
          />
        </el-form-item>
      </el-form>
      <div
        class="footer"
        style="width: 100%; text-align: center; padding: 10px"
      >
        <el-button
          style="margin-left: 10px; border: 1px silid red"
          type="success"
          @click="submit"
        >提交</el-button>
        <el-button
          style="margin-left: 30px"
          size="medium"
          type="default"
          @click="goBack()"
        >返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getProjectForId, insertReport } from '@/api/report'
import ProjectDetail from '../project/components/detail'
// 需要的表单
const formSubmit = {
  project_name: '', // 项目名称
  project_id: '', // 项目id
  bodies: '', // 五方主体
  record_supervisor: '', // 备案监理人员
  recocd_person: '', // 现场人员
  recocd_mobile: '', // 负责人电话号码
  project_overview: '', // 工程概况
  total_cost: '', // 总造价
  supervision_fee: '', // 监理费
  commencement_date: '', // 开工日期
  project_image_progress: '', // 工程形象进度
  reported_this_month: '', // 本月应上报监理费
  accumulative_report: '', // 累计上报监理费
  completed_this_month: '', // 本月完成产值
  accumulated_output_value: '', // 累计完成产值
  record_personnel_yes: '', // 备案人员是/否录入当地建筑主管部门
  awards: '' // 获奖情况
}

export default {
  components: {
    ProjectDetail
  },
  data() {
    return {
      diaplayBtn: true,
      showSub: false,
      submitFrom: Object.assign({}, formSubmit),
      reportList: [],
      displayR: false,
      activeNames: []
    }
  },

  computed: {
    // activeNames(){
    //   return this.reportList.map((i)=>{
    //     return i.id
    //   })
    // }
  },

  created() {
    const id = this.$route.query.id
    const value = this.$route.query.value
    this.submitFrom.project_id = id
    if (value == 2) {
      this.diaplayBtn = false
      this.showSub = true
    }
    this.getProject(id)
  },
  methods: {
    submit() {
      new Promise((resolve, reject) => {
        insertReport({ form: this.submitFrom }).then((response) => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
          this.goBack()
        })
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    getProject(id) {
      new Promise((resolve, reject) => {
        getProjectForId({ id: id }).then((response) => {
          this.submitFrom.project_name = response.data.project_name
          this.reportList = response.data.report
          this.activeNames = this.reportList[0].id
          console.log(this.activeNames)
          if (this.reportList.length == 0) {
            this.displayR = true
          }
        })
      })
    }
  }
}
</script>
<style>
.app-report-details {
  width: 100%;
  padding: 20px;
}
.app-report-details .guarantees {
  display: flex;
  align-items: center;
}
.app-report-details .guarantees .el-form-item__content {
  margin-left: 0 !important;
}
.el-collapse-item__header {
  font-size: 15px;
}
</style>
